<template>
  <SysDialog
    :title="dialog.title"
    :width="dialog.width"
    :height="dialog.height"
    :visible="dialog.visible"
    @onConfirm="confrim"
    @onClose="onClose"
  >
    <template v-slot:content>
      <el-form
        :model="addMenuModel"
        ref="addMenuForm"
        :rules="rules"
        label-width="80px"
        size="mini"
      >
        <el-row>
          <el-col :span="24" :offset="0">
            <el-form-item prop="type" label="菜单类型">
              <el-radio-group v-model="addMenuModel.type">
                <el-radio :label="'0'">目录</el-radio>
                <el-radio :label="'1'">菜单</el-radio>
                <el-radio :label="'2'">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" :offset="0">
            <el-form-item prop="parentName" label="上级菜单">
              <el-input
                type="hidden"
                v-model="addMenuModel.parentId"
              ></el-input>
              <el-input
                @click="selectParent"
                readonly
                v-model="addMenuModel.parentName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item prop="label" label="菜单名称">
              <el-input v-model="addMenuModel.label"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col v-if="addMenuModel.type != '2'" :span="12" :offset="0">
            <el-form-item prop="icon" label="菜单图标">
              <el-input v-model="addMenuModel.icon"></el-input>
            </el-form-item>
          </el-col>
          <el-col v-if="addMenuModel.type == '1'" :span="12" :offset="0">
            <el-form-item prop="name" label="路由名称">
              <el-input v-model="addMenuModel.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col v-if="addMenuModel.type == '1'" :span="12" :offset="0">
            <el-form-item prop="path" label="路由地址">
              <el-input v-model="addMenuModel.path"></el-input>
            </el-form-item>
          </el-col>
          <el-col v-if="addMenuModel.type == '1'" :span="12" :offset="0">
            <el-form-item prop="url" label="组件路径">
              <el-input v-model="addMenuModel.url"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" :offset="0">
            <el-form-item prop="code" label="权限字段">
              <el-input v-model="addMenuModel.code"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="菜单序号">
              <el-input v-model="addMenuModel.orderNum"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
  </SysDialog>
  <!-- 上级菜单 -->
  <MenuParentVue ref="parentRef" @select="select"></MenuParentVue>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import SysDialog from '@/components/SysDialog.vue'
import useDialog from '@/hooks/useDialog'
// 引入操弹框的方法
import useAddMenu from '@/composables/menu/useAddMenu'
import MenuParentVue from './MenuParent.vue'
import useSelectParent from '@/composables/department/useSelectParent'
// 注册emit事件，传递给父组件
const emit = defineEmits(['save'])
const { dialog, onClose, onShow } = useDialog()
// 在解构出自己需要的方法的同时，把弹框的一些原有操作传递给他
// 让他可以完成需要的功能，因为这两个ts文件的作用都是用来操作弹窗
const { confrim, show, addMenuModel, rules, addMenuForm, select } = useAddMenu(
  dialog,
  onClose,
  onShow,
  emit
)
//上级部门,提取的纯方法，这个可以参考一下，后面直接使用
const { parentRef, selectParent } = useSelectParent()
//暴露出去
defineExpose({
  show
})
</script>
<style scoped lang="scss"></style>
